<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalabel=no,viewport-fit=cover">
		<title>webpack中配置vue组件的加载器</title>
		<script src="/bundle.js"></script>
	</head>
	<body>
		<div id="app">
			<h2>webpack中配置vue组件的加载器</h2>
			<ul>
				<li>运行npm i vue-loader vue-template-compiler -D命令</li>
				<li>在webpack.config.js配置文件中，添加vue-loader的配置项如下
				<pre>
	const VueLoaderPlugin = require('vue-loader/lib/plugin')
	module.exports = {
		module:{
			rules:[
				//...其他规则
				{test:/\.vue$/,loader:'vue-loader'}
			]
		},
		plugins:[
			//...其他插件
			new VueLoaderPlugin()//请确保引入这个插件
		]
	}
				</pre>
				</li>
			</ul>
			<h2>在webpack项目中使用vue</h2>
			<ul>
				<li>运行npm i vue -S安装vue</li>
				<li>在src--index.js入口文件中，通过import Vue from 'vue'来导入vue构造函数</li>
				<li>创建vue的实例对象，并指定要控制的el区域</li>
				<li>通过render函数渲染App组件</li>
				<li>
					<pre>
	//1,导入Vue构造函数
	import Vue from 'vue'
	//2,导入App根组件
	import App from './components/App.vue'
	
	const vm = new Vue({
		//3,指定vm实例要控制的页面区域
		el:"#app",
		//4,通过render函数，把指定的组件渲染到el区域中
		render:h=>h(App)
	})
					</pre>
				</li>
			</ul>
			<h2>webpack打包发布</h2>
			<ul>
				<li>上线之前需要通过webpack将应用进行整体打包，可以通过package.json文件配置打包命令:</li>
						<pre>
	//在package.json文件中配置webpack打包命令
	//该命令默认加载项目根目录中的webpack,config.js配置文件
	"scripts":{
	//用于打包的命令
	"build":"webpack -p"
	//用于开发调试的命令
	"dev":"webpack-dev-server --open --host 127.0.0.1 --port 3000"
			}
						</pre>
						<li>运行npm run build</li>
			</ul>
	
		</div>
		<div id="box">
			
		</div>
	</body>
</html>
